<script setup>
import {
  getCurrentInstance,
  onMounted,
  ref,
  toRefs,
  defineEmits,
  computed,
  defineExpose
} from "vue";
let currentInstance = "";

const props = defineProps({
  startTimestamp: {
    type: Number,
  },
});

const isShow = ref(false);

const emit = defineEmits(["changeStartTimestamp"]);

let timer = ref();

// let processWidth = ref(0);
let barWidth = ref(0);
let nowTimestamp = ref(0);
let playSeconds = ref(0);

function barLoad() {
  let { startTimestamp } = toRefs(props);
  if (timer.value) clearInterval(timer.value);
  timer.value = setInterval(() => {
    playSeconds.value += 1;
    if (
      playSeconds.value >=
      Math.floor((nowTimestamp.value - startTimestamp.value) / 1000)
    ) {
      clearInterval(timer.value);
    }
    nowTimestamp.value = Date.now();
  }, 1000);
}

onMounted(() => {
  currentInstance = getCurrentInstance();
  const { width } = currentInstance.ctx.$refs.barRef.getBoundingClientRect();
  barWidth.value = width;
});

function formatTime(time) {
  return time >= 10 ? time : "0" + time;
}

const totalTime = computed(() => {
  let { startTimestamp } = toRefs(props);
  let diffTimestamp = nowTimestamp.value - startTimestamp.value;
  let minutes = Math.floor(diffTimestamp / 1000 / 60);
  minutes = formatTime(minutes);
  let seconds = Math.floor(diffTimestamp / 1000) % 60;
  seconds = formatTime(seconds);
  return `${minutes}:${seconds}`;
});

const startTime = computed(() => {
  let minutes = Math.floor(playSeconds.value / 60);
  minutes = formatTime(minutes);
  let seconds = playSeconds.value % 60;
  seconds = formatTime(seconds);
  return `${minutes}:${seconds}`;
});

const processWidth = computed(() => {
  let { startTimestamp } = toRefs(props);
  let diffTimestampSecond = Math.floor(
    (nowTimestamp.value - startTimestamp.value) / 1000
  );
  let processWidth = (playSeconds.value / diffTimestampSecond) * barWidth.value;
  if (processWidth > barWidth.value) {
    processWidth = barWidth.value;
  }
  return processWidth;
});

const handleSliderMouseDown = (e) => {
  clearInterval(timer.value);
  e.preventDefault();
  if (nowTimestamp.value === 0) nowTimestamp.value = Date.now();
  const offsetX = e.offsetX;
  document.onmousemove = (e) => {
    e.preventDefault();
    // 滑块距离可视区域距离
    const x = e.clientX;
    const cl = x - offsetX;
    const { left, width } =
      currentInstance.ctx.$refs.barRef.getBoundingClientRect();
    barWidth.value = width;
    const ml = cl - left + 6;
    let processWidthValue = 0;
    if (ml <= 0) {
      processWidthValue = 0;
    } else if (ml > width) {
      processWidthValue = width;
    } else {
      processWidthValue = ml;
    }

    let { startTimestamp } = toRefs(props);
    let newPlaySecond = Math.floor(
      ((processWidthValue / barWidth.value) *
        (Date.now() - startTimestamp.value)) /
        1000
    );
    playSeconds.value = newPlaySecond;
    // processWidth.value = processWidthValue;
  };
  document.onmouseup = () => {
    document.onmousemove = null;
    document.onmouseup = null;
    // let { startTimestamp } = toRefs(props);
    // let diffTimestamp = nowTimestamp.value - startTimestamp.value;
    // let movedTimestamp =
    //   startTimestamp.value +
    //   Math.floor((diffTimestamp * processWidth.value) / barWidth.value);
    // emit("changeStartTimestamp", movedTimestamp);
    let { startTimestamp } = toRefs(props);
    let offsetTimeSecond =
      Math.floor((nowTimestamp.value - startTimestamp.value) / 1000) -
      playSeconds.value;
    emit("getOffsetTimeSecond", offsetTimeSecond);
    barLoad();
  };

  // 播放
  const start = () => {
    isShow.value = true;
    nowTimestamp.value = Date.now();
    barLoad();
  };

  defineExpose({
    start
  })
};
</script>

<template>
  <div class="process-wrap" v-show="isShow">
    <div class="current-time">{{ startTime }}</div>
    <div class="process-bg" ref="barRef">
      <div class="process-current" :style="{ width: processWidth + 'px' }">
        <div class="process-drag" @mousedown="handleSliderMouseDown"></div>
      </div>
    </div>
    <div class="total-time">{{ totalTime }}</div>
  </div>
</template>

<style scoped>
.process-wrap {
  display: flex;
  padding: 0 10px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 20px;
}
/* 进度条背景 */
.process-bg {
  width: 100%;
  height: 6px;
  background-color: #ccc;
  border-radius: 3px;
  cursor: pointer;
}
/* 进度条 */
.process-current {
  position: relative;
  width: 30%;
  height: 100%;
  background-color: #f00;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
/* 进度条拖动按钮 */
.process-drag {
  position: absolute;
  right: -6px;
  top: -3px;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  border: 2px solid #fff;
  background-color: #fff;
  z-index: 500;
}
/* 当前时间 */
.current-time,
.total-time {
  width: 100px;
  color: #fff;
}
</style>
